<template>
  <view class="settings-container">
    <view class="settings-header">
      <button class="back-btn" @tap="goBack">‹</button>
      <text class="title">设置</text>
      <view class="placeholder"></view>
    </view>
    
    <view class="settings-content">
      <view class="settings-group">
        <view class="settings-item">
          <text class="item-label">深色模式</text>
          <switch :checked="isDark" @change="toggleDarkMode" color="#667eea" />
        </view>
        
        <view class="settings-item">
          <text class="item-label">消息通知</text>
          <switch :checked="notifications" @change="toggleNotifications" color="#667eea" />
        </view>
        
        <view class="settings-item">
          <text class="item-label">自动播放视频</text>
          <switch :checked="autoPlay" @change="toggleAutoPlay" color="#667eea" />
        </view>
      </view>
      
      <view class="settings-group">
        <view class="settings-item" @tap="clearCache">
          <text class="item-label">清除缓存</text>
          <text class="item-value">{{ cacheSize }}</text>
          <text class="item-arrow">›</text>
        </view>
        
        <view class="settings-item" @tap="checkUpdate">
          <text class="item-label">检查更新</text>
          <text class="item-value">{{ version }}</text>
          <text class="item-arrow">›</text>
        </view>
        
        <view class="settings-item" @tap="aboutApp">
          <text class="item-label">关于应用</text>
          <text class="item-arrow">›</text>
        </view>
      </view>
      
      <view class="settings-group">
        <button class="logout-btn" @tap="logout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDark: false,
      notifications: true,
      autoPlay: false,
      cacheSize: '12.5 MB',
      version: 'v1.0.0'
    }
  },
  onLoad() {
    this.loadSettings()
  },
  methods: {
    loadSettings() {
      // 从本地存储加载设置
      this.isDark = uni.getStorageSync('theme') === 'dark'
      this.notifications = uni.getStorageSync('notifications') !== false
      this.autoPlay = uni.getStorageSync('autoPlay') === true
    },
    
    toggleDarkMode(e) {
      this.isDark = e.detail.value
      const theme = this.isDark ? 'dark' : 'light'
      uni.setStorageSync('theme', theme)
      
      // 应用主题
      if (this.isDark) {
        document.documentElement.classList.add('dark-theme')
      } else {
        document.documentElement.classList.remove('dark-theme')
      }
      
      uni.showToast({
        title: `已切换到${this.isDark ? '深色' : '浅色'}模式`,
        icon: 'none'
      })
    },
    
    toggleNotifications(e) {
      this.notifications = e.detail.value
      uni.setStorageSync('notifications', this.notifications)
      
      uni.showToast({
        title: this.notifications ? '已开启消息通知' : '已关闭消息通知',
        icon: 'none'
      })
    },
    
    toggleAutoPlay(e) {
      this.autoPlay = e.detail.value
      uni.setStorageSync('autoPlay', this.autoPlay)
      
      uni.showToast({
        title: this.autoPlay ? '已开启自动播放' : '已关闭自动播放',
        icon: 'none'
      })
    },
    
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除所有缓存数据吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储
            uni.clearStorage()
            this.cacheSize = '0 KB'
            
            // 重新加载设置
            this.loadSettings()
            
            uni.showToast({
              title: '缓存已清除',
              icon: 'success'
            })
          }
        }
      })
    },
    
    checkUpdate() {
      uni.showLoading({
        title: '检查更新中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showModal({
          title: '检查更新',
          content: '当前已是最新版本',
          showCancel: false
        })
      }, 1500)
    },
    
    aboutApp() {
      uni.showModal({
        title: '关于应用',
        content: '跨端Vue统一开发框架\n版本：v1.0.0\n\n一套代码，多端运行\n支持iOS、Android、鸿蒙Next、Web、各种小程序、快应用等平台',
        showCancel: false
      })
    },
    
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户数据
            uni.clearStorage()
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    },
    
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.settings-header {
  background: #fff;
  padding: 0 40rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #eee;
  
  .back-btn {
    background: none;
    border: none;
    font-size: 48rpx;
    color: #333;
    padding: 0;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .placeholder {
    width: 60rpx;
  }
}

.settings-content {
  padding: 20rpx;
}

.settings-group {
  background: #fff;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  
  .settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background: #f9f9f9;
    }
    
    .item-label {
      font-size: 30rpx;
      color: #333;
      flex: 1;
    }
    
    .item-value {
      font-size: 26rpx;
      color: #999;
      margin-right: 20rpx;
    }
    
    .item-arrow {
      font-size: 36rpx;
      color: #ccc;
    }
  }
}

.logout-btn {
  background: #ff4757;
  color: #fff;
  border: none;
  border-radius: 15rpx;
  padding: 30rpx;
  font-size: 32rpx;
  width: 100%;
  
  &:active {
    background: #ff3838;
  }
}

/* 深色模式适配 */
.dark-theme {
  .settings-container {
    background: #1a1a1a;
  }
  
  .settings-header {
    background: #2c2c2c;
    border-bottom-color: #3a3a3a;
    
    .back-btn, .title {
      color: #fff;
    }
  }
  
  .settings-group {
    background: #2c2c2c;
    
    .settings-item {
      border-bottom-color: #3a3a3a;
      
      &:active {
        background: #3a3a3a;
      }
      
      .item-label {
        color: #fff;
      }
      
      .item-value {
        color: #aaa;
      }
    }
  }
}
</style>
